<template>
  <view class="service-detail">
    <view v-if="list" class="service-list">
      <view class="info">
        <text class="name">{{ list.name }}</text>
        <view class="details">
          <text class="label">服务类型：</text>
          <text class="value">{{ list.type }}</text>
        </view>
        <view class="details">
          <text class="label">服务地址：</text>
          <text class="value">{{ list.location }}</text>
        </view>
        <view class="details">
          <text class="label">服务描述：</text>
          <text class="value">{{ list.description }}</text>
        </view>
        <view class="details">
          <text class="label">服务时间 :</text>
          <text class="value">{{ list.serviceStartTime }}</text>
        </view>
        <view class="details">
          <text class="label">状态 :</text>
          <text class="value">{{ list.status }}</text>
        </view>
      </view>
    </view>
    <view v-else class="no-data">
      <text>未找到服务人员信息</text>
    </view>
  </view>
  <nut-tabbar bottom safe-area-inset-bottom placeholder class="flex">
    <nut-button shape="square" type="primary" class="flex-1" @click="booking(list.businessOrderId)"
      >立即接单
    </nut-button>
  </nut-tabbar>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { usetakeserviceing } from "@/hooks/takeorders";
const { takeserviceing } = usetakeserviceing();

const list = ref();
onLoad((options) => {
  try {
    if (options.data) {
      const decodedData = decodeURIComponent(options.data);
      list.value = JSON.parse(decodedData);
    } else {
      uni.showToast({
        title: "未接收到参数",
        icon: "none",
      });
    }
  } catch (error) {
    uni.showToast({
      title: "解析参数失败",
      icon: "none",
    });
  }
});
const booking = (id) => {
  console.log("开始接单");
  const servicePersonId = uni.getStorageSync("userId");
  takeserviceing(id, servicePersonId);
};
</script>

<style scoped lang="scss">
.service-detail {
  padding: 20px;
  .service-header {
    text-align: center;
    margin-bottom: 20px;
    .title {
      font-size: 20px;
      font-weight: bold;
    }
  }
  .service-list {
    .service-item {
      display: flex;
      margin-bottom: 20px;
      .avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .info {
        flex: 1;
        margin-left: 10px;
        .name {
          font-size: 16px;
          font-weight: bold;
        }
        .details {
          margin-top: 5px;
          .label {
            font-size: 14px;
            color: #666;
          }
          .value {
            font-size: 14px;
            color: #333;
          }
        }
      }
    }
  }
}
</style>
